<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="img/favicon.png">
    <script src="js/jquery-3.2.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="css/star-rating.min.css" rel="stylesheet">
    <script src="js/star-rating.min.js"></script>
    <script src="js/twemoji.min.js"></script>
    <script src="js/marked.min.js"></script>
    <link href="css/github-markdown.css" rel="stylesheet">
    <title>日报</title>
    <style type="text/css">
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }

        body {
            overflow-x: hidden;
        }

        pre{
            /*white-space:pre-wrap;*/
            /*white-space:-moz-pre-wrap;*/
            /*white-space:-o-pre-wrap;*/
            /*word-wrap:break-word;*/
            background-color: #e0e0ff;
        }
        #header {
            height: 40pt;
            background-color: cornflowerblue;
            box-shadow: 0 1px 5px black;
            margin-bottom: 50px;
            padding-left: 40px;
            padding-right: 40px;
            padding-top: 5px;
            color: white;
        }

        #logo {
            width: 140px;
            height: 40px;
        }

        #searchbar {
            position: absolute;
            top: 10px;
            left: 35%;
        }

        #header h1 {
            color: white;
            margin: 0;
        }

        #all-loading {
            position: absolute;
            top: 200px;
            left: 46%;
        }

        #bottom-loading {
            left: 40%;
            position: relative;
        }

        #container {
            height: auto;
            width: 100%;
        }

        #container div.alert {
            height: 100pt;
            width: 90%;
            position: absolute;
            top: 45%;
            left: 5%;
            font-weight: 900;
            font-size: 40pt;
        }

        .bs-callout {
            border: solid lightsteelblue 1pt;
            padding: 2em;
        }

        .bs-callout-warning {
            border-left: cornflowerblue 3px;
            box-shadow: 0 0 1em grey;
            margin: 10px;
        }

        .rating-container .clear-rating {
            display: none;
        }


        div.rating-container.rating-md.rating-animate{
            font-size: 1.5em;
            display: inline-block;
        }

        img.emoji {
        /* Override any img styles to ensure Emojis are displayed inline*/
        margin: 0px !important;
            display: inline !important;
        }


        /*mark down */
        .markdown-body {
            box-sizing: border-box;
            /*min-width: 200px;*/
            /*max-width: 980px;*/
            margin: 0 auto;
            padding: 9.5px;
            /*padding-left: 2em;*/
            border-radius: 4px;
            border: 1px solid #ccc;
            /*white-space: pre-wrap;*/
            /*white-space: -moz-pre-wrap;*/
            white-space: -o-pre-wrap;
            word-wrap: break-word;
            background-color: #f8f8f8;
        }

        .markdown-body p {
            margin: 0;
        }

        @media (max-width: 767px) {
            .markdown-body {
                padding: 15px;
            }
        }

        /*li {*/
            /*margin-left: 2em;*/
        /*}*/

    </style>
</head>
<body>
<div class="row" id="header">
    <a href="index.html"><img src="img/logo.png" id="logo" class="pull-left hidden-xs"/></a>
    <div id="searchbar" class="hidden-xs hidden-sm col-md-6 col-lg-4">
        <form>
            <div class="form-group">
                <label class="sr-only" for="search-group">姓名</label>
                <div class="input-group">
                    <input type="search" class="form-control" id="search-group" placeholder="搜名字">
                    <div class="input-group-addon" onclick="searchByName()"><span class="glyphicon glyphicon-search"
                                                                                  aria-hidden="true"></span></div>
                </div>
            </div>
        </form>
    </div>
    <div class="pull-right">
        <a href="note.html"><h1>写今天</h1></a>
    </div>
</div>
<div class="row">
    <div id="leftbar" class="hidden-xs col-sm-1 clo-md-2 col-lg-3">
    </div>
    <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6" id="middlebar" onscroll="scrollBottomTest()">
        <div id="container">
        </div>
        <img src="img/loading.gif" id="all-loading"/>
        <script>
            $("#all-loading").hide();
        </script>
        <img src="img/loading-bottom.gif" id="bottom-loading"/>
        <script>
            $("#bottom-loading").hide();
        </script>
    </div>
    <div id="right-bar" class="hidder-xs col-sm-1 clo-md-2 col-lg-3">
    </div>
</div>
<script>
    var page = 0;
    var name = "/*";
    var date = "/*";
    var moreEnable = false;
    var emptyBody =
        "            <div   class=\"alert alert-danger alert-dismissible\" role=\"alert\" id='alert-block'>\n" +
        "                <p>不找啦，找不到啦</p>" +
        "                <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">\n" +
        "                    <span aria-hidden=\"true\">&times;</span>\n" +
        "                </button>\n" +
        "            </div>";
    searchByName();

    document.onkeydown = function (event) {
        if(event.keyCode === 13) {
            searchByName();
            return false;
        }
    };

    window.onload = function () {
        // Set the size of the rendered Emojis
        // This can be set to 16x16, 36x36, or 72x72
        twemoji.size = '16x16';

        // Parse the document body and
        // insert <img> tags in place of Unicode Emojis
        twemoji.parse(document.body);
    };

    function searchByName() {
        //先加载
        $("#all-loading").show();
        name = document.getElementById("search-group").value;
        $.ajax(
            {
                type: "GET",
                url: "/report",
                data: {
                    name,
                    page
                },
                success: function (data) {
                    $("#container").text("");
                    moreEnable = !data.last;
                    console.log(moreEnable);
                    data = data.content;
                    if (data.length === 0) {
                        emptyContent();
                    } else showNotes(data);
                    $("#all-loading").hide();
                    unknownFunc();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#container").html(
                        emptyBody
                    );
                    $("#all-loading").hide();
                }
            }
        );
    }

    function getSearchResult() {
        console.log("get result" + page);
        if (!moreEnable) return;
        page = page + 1;
        $("#bottom-loading").show();
        $.ajax(
            {
                type: "GET",
                url: "/report",
                data: {
                    name,
                    page
                },
                success: function (data) {
                    moreEnable = !data.last;
                    console.log(moreEnable);
                    data = data.content;
                    showNotes(data);
                    $("#bottom-loading").hide();
                    unknownFunc();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            }
        );
    }

    function showNotes(notes) {
        notes.forEach(
            function (note) {
                note.works = note.works.replace(/\n/g, "\n\n");
                note.plan = note.plan.replace(/\n/g, "\n\n");
                $("#container").append("<div class='bs-callout bs-callout-warning'>"
                    + "<h1>" + note.name + "<code>" + note.date + "</code>" + "</h1>"

                        //修改判断类型
                    + "<p><strong>今日完成的工作：</strong><article class='markdown-body'>" + marked(note.works) + "</article></p>"


                    + "<p><strong>工作用时：</strong>" + note.workTime + "</p>"
                    + "<p><strong>娱乐用时：</strong>" + note.playTime + "</p>"
                    //修改判断类型
                    + "<p><strong>明日计划：</strong><article class='markdown-body'>" + marked(note.plan) + "</article></p>"

                    + "<p><strong>明日计划工作：</strong>" + note.planWork + "</p>"
                    + "<p><strong>明日计划娱乐：</strong>" + note.planPlay + "</p>"
                    + "<p style='display: inline-block'><strong>我的评分：</strong></p>" + "<input id=\"score\" value=\"" + note.score + "\" type=\"number\" class=\"rating\" min=0 max=5 step=0.5 data-size=\"sm\" >"
                    + "</div>"
                );
            }
        );
    }

    function emptyContent() {
        $("#container").html(
            emptyBody
        );
        $("#all-loading").hide();
    }

    $(document).scroll(
        function () {
            if (moreEnable && $(document).scrollTop() + window.innerHeight === $(document).height()) {
//                console.log("good reaction");
                getSearchResult();
                $(".rating-stars").unbind();
            }
        });

    function unknownFunc() {
        var $input = $('input.rating');
        if ($input.length) {
            $input.removeClass('rating-loading').addClass('rating-loading').rating();
        }
//        $(".rating-stars").unbind();
    }

    //disable the rating click
    setInterval(function(){
        $(".rating-stars").unbind();
    },1000);

</script>
</body>

</html>